<cly-drawer 
    @submit="onSubmit"
    @close="onClose"
    @copy="onCopy"
    ref="eventGroupDrawer"
    :title="title"
    :saveButtonLabel="saveButtonLabel"
    v-bind="$props.controls">
    <template v-slot:default="drawerScope">
        <cly-form-step id="edit-event-group-step" name="First Step">

            <div class="bu-pt-3 text-smallish font-weight-bold bu-mb-2">{{ i18n('data-manager.event-group-name') }}</div>
            <!-- validation for event group name -->
            <validation-provider name="name" rules="required" v-slot="v">
                <el-input
                    :class="{'is-error': v.errors.length > 0}"
                    v-model="drawerScope.editedObject.name"
                    :placeholder="i18n('data-manager.name-event-group-placeholder')">
                </el-input>
            </validation-provider>
                <div class="bu-mt-5 bu-mb-4">
                    <el-checkbox v-model="drawerScope.editedObject.needDescription" size="medium">
                        <span class="color-cool-gray-100 font-weight-normal">Use {{i18n('data-manager.description')}}</span>
                    </el-checkbox>
                </div>
    
                <div v-if="drawerScope.editedObject.needDescription || drawerScope.editedObject.description" class="text-smallish font-weight-bold bu-mb-1">{{ i18n('data-manager.event-group-description') }}</div>
                <!-- validation for description when it is selected -->
                <validation-provider v-if="drawerScope.editedObject.needDescription || drawerScope.editedObject.description"
                name="desc" rules="required" v-slot="v">
                    <el-input
                    class="bu-pb-2"
                    v-if="drawerScope.editedObject.needDescription || drawerScope.editedObject.description"
                    type="textarea"
                    :rows="2"
                    v-model="drawerScope.editedObject.description"
                    :class="{'is-error': v.errors.length > 0}"
                    :placeholder="i18n('data-manager.events.enter-event-description')">
                    </el-input>
                </validation-provider>
                <div class="text-big font-weight-bold bu-mt-5">
                    {{i18n('data-manager.included-events')}}
                </div>
                <div class="text-smallish font-weight-bold bu-mt-4 bu-mb-2">{{i18n('data-manager.select-events')}}</div>
                <!-- validation for selecting from events -->
                <validation-provider name="allEvents" rules="required" v-slot="v">
                    <el-select class="bu-mb-2" multiple style="width:100%" v-model="drawerScope.editedObject.source_events" >
                        <el-option v-for="item in eventList" :key="item.value" :value="item.value">
                        </el-option>
                    </el-select>
                </validation-provider>

                <div class="bu-my-4">
                    <div class="text-big bu-mb-1 bu-mt-5 font-weight-bold">{{ i18n('data-manager.event-group-visibility') }}</div>
                    <div class="text-small color-cool-gray-50 bu-mb-3">{{ i18n('data-manager.event-group-visibility-subheading') }}</div>
                    <div class="bu-is-flex bu-pt-2">
                    <el-switch class="bu-mr-1" v-model="drawerScope.editedObject.status">
                </el-switch>
                <div class="text-small bu-ml-1 color-cool-gray-50 bu-pt-1">{{ i18n('data-manager.event-group-is-visible') }}</div>
                </div>
                </div>

                <div v-if="drawerScope.editedObject.display_map">
                    <div class="text-big font-weight-bold bu-pt-4">{{i18n('data-manager.event-group-properties')}}</div>
                    <div class="bu-mt-4">
                        <div class="text-smallish font-weight-bold">{{ i18n('data-manager.display-name-for-count') }}</div>
                        <div class="bu-level">
                            <div class="text-small bu-pt-1 bu-pb-2 bu-level-left bu-level-item color-cool-gray-50">{{ i18n('data-manager.display-name-for-count-subheading') }}</div>
                            <div class="text-small bu-level-item bu-level-right color-cool-gray-50">{{i18n('data-manager.optional')}}</div>
                        </div>
                    </div>
                    <el-input
                    class="bu-mb-3" 
                    v-model="drawerScope.editedObject.display_map.c" 
			        placeholder="Count">
			        </el-input>
                    <div class="bu-mt-3">
                        <div class="text-smallish font-weight-bold">{{ i18n('data-manager.display-name-for-sum') }}</div>
                        <div class="bu-level">
                            <div class="text-small bu-pt-1 bu-pb-2 bu-level-left bu-level-item color-cool-gray-50">{{ i18n('data-manager.display-name-for-sum-subheading') }}</div>
                            <div class="text-small bu-level-item bu-level-right color-cool-gray-50">{{i18n('data-manager.optional')}}</div>
                        </div>
                    </div>
                    <el-input
                    class="bu-mb-3" 
                    v-model="drawerScope.editedObject.display_map.s" 
                    placeholder="Sum">
                    </el-input>
                    <div class="bu-mt-3">
                        <div class="text-smallish font-weight-bold">{{ i18n('data-manager.display-name-for-duration') }}</div>
                        <div class="bu-level">
                            <div class="text-small bu-pt-1 bu-pb-2 bu-level-left bu-level-item color-cool-gray-50">{{ i18n('data-manager.display-name-for-duration-subheading') }}</div>
                            <div class="text-small bu-level-item bu-level-right color-cool-gray-50">{{i18n('data-manager.optional')}}</div>
                        </div>
                    </div>
                    <el-input
                    class="bu-mb-3" 
                    v-model="drawerScope.editedObject.display_map.d" 
                    :placeholder="i18n('data-manager.duration')">
                    </el-input>
                </div>
            </div>
            
        </cly-form-step>
    </template>
</cly-drawer>